Axios拦截器是指在Axios请求之前或之后执行的一段代码,用于修改请求数据、添加请求头、统一处理异常等。它是Axios提供的一个非常强大的功能,允许开发者在请求发送之前或响应返回之后对数据进行全局处理。
Axios拦截器主要分为两种:请求拦截器(request interceptors)和响应拦截器(response interceptors)。
请求拦截器
请求拦截器用于在请求被发送之前对其进行修改或添加一些公共的逻辑。例如,可以给每个请求体都加上token,或者设置一些全局的请求头。以下是一个简单的请求拦截器的例子:
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
在这个例子中,我们在每个请求中添加了一个名为“Authorization”的请求头,其值为从localStorage中获取的token。
响应拦截器
响应拦截器用于在接收到响应数据之后对其进行处理。例如,可以对返回的数据进行统一处理,或者对特定的错误进行处理。以下是一个简单的响应拦截器的例子:
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
if (error.response.status === 401) {
// 统一处理401错误
alert('请重新登录');
return Promise.reject(error);
}
return Promise.reject(error);
});
在这个例子中,我们检查响应的状态码,如果状态码为401,则弹出提示框让用户重新登录,并拒绝这个Promise。否则,直接返回响应或拒绝Promise(如果响应中存在其他错误)。
拦截器的链式结构
Axios拦截器是链式结构的,这意味着可以同时使用多个拦截器,并且它们会按照添加的顺序依次执行。这使得开发者可以非常灵活地对请求和响应进行全局处理。
移除拦截器
在某些情况下,可能需要移除之前添加的拦截器。可以通过返回拦截器函数时的引用来做到这一点。不过需要注意的是,在Axios的较新版本中,eject
方法已被remove
方法取代。因此,应该使用remove
而不是eject
来移除拦截器。
const myRequestInterceptor = axios.interceptors.request.use(function (config) {
// ...
});
// 稍后,当你想移除这个拦截器时:
axios.interceptors.request.remove(myRequestInterceptor);
综上所述,Axios拦截器是一个非常有用的功能,它允许开发者在请求和响应阶段对数据进行全局处理。通过使用拦截器,可以更加灵活和高效地管理HTTP请求和响应,从而更好地处理数据交互。